<template>
	<view class="page index">
		<view class="header">
			<common-search v-model="keyWord" @input="input" @filter="openPopup"></common-search>
		</view>
		<view class="total">
			共<span>8</span>条跟进记录
		</view>
		<view class="main">
			<scroll-view class="scroll" scroll-y="true" @scrolltolower="scrollLower" :enhanced="true" :show-scrollbar="false">
				<view class="container">
					<view class="list" v-for="item in 8" :key="index">
						<view class="item">
							<view class="project-name">
								XXXXXXXXXXXXXXXX项目
							</view>
							<view class="company">
								项目编号：123321123
							</view>
							<view class="company">
								客户公司名称
							</view>
							<view class="message" style="padding-top: 8rpx;">
								<view class="mes-item">
									本次跟进时间：2024-12-12
								</view>
								<view class="mes-item">
									本次跟进内容：xxxxxxxxxxxxxxxxxxx
								</view>
							</view>
							<block v-if="showMore">
								<view class="message">
									<view class="mes-item">
										跟进方式：电话
									</view>
									<view class="mes-item">
										联系人：XXX
									</view>
									<view class="mes-item">
										跟进人：业务员1
									</view>
									<view class="mes-item">
										计划下次跟进时间：2024-12-21
									</view>
									<view class="files">
										<view class="file-item">
											xxxxx.jpg
										</view>
										<view class="file-item">
											xxxxx.jpg
										</view>
									</view>
								</view>
							</block>
							<view class="more" @click="showMore = !showMore">
								<span class="iconfont icon" v-if="showMore">&#xea51;</span>
								<span class="iconfont icon" v-else>&#xea4e;</span>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="create" @click="createFollow">
				新建
			</view>
			<uni-popup ref="followPopup" type="top" background-color="#fff">
				<view class="filter">
					<view class="filter-container member">
						<view class="title">
							跟进人
						</view>
						<view class="filter-list">
							<view :class="['item', memberIndex == index && 'select']" v-for="(item, index) in memberList" :key="index" @click="memberIndex = index">
								{{item}}
							</view>
						</view>
					</view>
					<view class="filter-container time">
						<view class="title">
							跟进时间
						</view>
						<view class="filter-list">
							<view :class="['item', timeIndex == index && 'select']" v-for="(item, index) in timeList" :key="index" @click="changeTime(index)">
								{{item}}
							</view>
						</view>
						<view class="select-time">
							<uni-datetime-picker v-model="timeRange" type="daterange" :end="Date.now()" rangeSeparator="至" @change="changeData" />
						</view>
					</view>
					<view class="footer">
						<button class="cencle" @click="cencle">清空</button>
						<button class="confire">确定</button>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import commonSearch from "@/components/commonSearch.vue"
	export default {
		components: {
			commonSearch
		},
		data() {
			return {
				keyWord: '',
				showMore:false,
				memberIndex: -1,
				memberList: ['我跟进的', '下属跟进的', '业务员1', '业务员2'],
				timeIndex: -1,
				timeList: ['今日', '昨日', '本周', '上周', '本月', '上月', '本季度', '上季度'],
				timeRange:[]
			}
		},
		methods: {
			//关键字
			input(e) {
				console.log(e, this.keyWord, '================')
			},
			// 清空筛选
			cencle(){
				this.memberIndex = -1;
				this.timeIndex = -1;
				this.timeRange = [];
			},
			changeTime(index){
				if(this.timeRange.length > 0){
					this.timeRange = [];
				}
				this.timeIndex = index
			},
			changeData(){
				this.timeIndex = -1;
			},
			openPopup(){
				this.$refs.followPopup.open();
			},
			createFollow() {
				uni.navigateTo({
					url: '/pages/index/follow/create'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/customicons.scss";

	.index {
		@include flex-c;

		>.header {
			padding: 24rpx 30rpx 0;
			flex: 0 0 auto;
		}
		.total{
			padding: 18rpx 28rpx 6rpx;
			color: #000;
			font-size: 24rpx;
			span{
				color: #4095e5;
				font-weight: bold;
				padding: 0 10rpx;
			}
		}
		.main {
			flex: 1 0 0;
			overflow: hidden;

			.scroll{
				height: 100%;
				.container{
					padding: 24rpx 28rpx;
					.list{
						padding: 0 0 18rpx;
						.item{
							@include box;
							padding: 22rpx 28rpx 0;
							.project-name{
								color: #101010;
								font-size: 28rpx;
							}
							.company{
								color: #9A9A9A;
								font-size: 24rpx;
								// padding: 14rpx 0 18rpx;
							}
							.message{
								.mes-item{
									color: #9A9A9A;
									font-size: 24rpx;
									padding: 10rpx 0 0;
								}
								.files{
									padding: 24rpx 0 0;
									.file-item{
										height: 52rpx;
										line-height: 52rpx;
										text-align: center;
										font-size: 28rpx;
										color: #101010;
										border-radius: 6rpx;
										background-color: #F3F6F9;
										margin-bottom: 18rpx;
										&:last-child{
											margin-bottom: 0;
										}
									}
								}
							}
							.more{
								@include flex-r-center-center;
								padding: 22rpx 0 16rpx;
								.icon{
									color: #BEBEBE;
									font-size: 28rpx
								}
							}
						}
					}
				}
			}

			.create {
				position: fixed;
				bottom: 106rpx;
				right: 30rpx;
				width: 80rpx;
				height: 80rpx;
				background-color: #4095E5;
				@include flex-r-center-center;
				font-size: 24rpx;
				color: #fff;
				border-radius: 50%;
				box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
			}
			.filter {
				@include popup;
				.amount{
					.amoun-money{
						@include flex-r-between-center;
						border: 4rpx #E0E3EA solid;
						border-radius: 6rpx;
						height: 88rpx;
						padding: 0 20rpx;
						.tag{
							color: #C1C2C5;
							font-size: 38rpx;
						}
						.text{
							color: #101010;
							font-size: 32rpx;
						}
						input{
							text-align: center;
							font-size: 32rpx;
							color: #C4C7CF;
							padding: 0 10rpx;
						}
						.placeholder{
							text-align: center;
							color: #C4C7CF;
							font-size: 32rpx;
						}
					}
				}
				.time{
					.select-time{
						padding: 20rpx 0 0;
					}
				}
			}

			&::-webkit-scrollbar {
				display: none;
			}
		}
	}
	::v-deep .uni-calendar--fixed {
		top: 0;
		bottom: unset;
	}
</style>